<template>
	<view class="wapper">

		<view class="top-conetnt">
			<view class="status-bar">

			</view>
			<view class="hei" style="height: 30rpx;">

			</view>
		<!-- #ifndef H5 -->
		<view class="top-icon ss-flex ss-row-between" >
				<image src="/static/grzx.png" mode="" class="icon" @tap="LC.$router.go('/pages/index/user')"></image>
				<view class="ss-flex">
					<image src="/static/fyjx.png" mode="" class="logo" ></image>
					
				</view>
				<image src="/static/ss.png" mode="" class="icon" @tap="LC.$router.go('/pages/index/search/search')"></image>
			
				
			</view>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<view class="top-icon ss-flex ss-row-between" >
				
				<view class="ss-flex">
					<image src="/static/fyjx.png" mode="" class="logo" ></image>
					
				</view>
				<a  @tap="LC.$router.go('/pages/index/download/download')" class="download">下载App</a>
			
				
			</view>
		<!-- #endif -->
			
			
		
			

			<u-swiper :list="state.data.banner" keyName="image" height="362rpx"></u-swiper>


			<view class="botcontent">
				<view class="notic" style="margin-top: 30rpx;">
					<u-notice-bar :text="state.data.notice" color="#333"
						bgColor="#F6F6F6"
						style="border-radius: 27rpx;padding: 25rpx 20rpx;" fontSize="
				     28rpx
				   "></u-notice-bar>
				</view>
			</view>
			<view class="bot-content">
				
					<u-tabs :list="state.data.category" v-if="state.data.category.length" lineWidth="40rpx"
						lineColor="#FF5353" :activeStyle="{
					               color: '#453C3C',
					               fontWeight: '600',
					              
					           }" :inactiveStyle="{
					              color: '#3F3B3B',
					              fontWeight: '300',
					              
					           }"  itemStyle="padding-left: 15rpx; padding-right: 15rpx; height:88rpx;"
						@change="changetab"></u-tabs>
				<view class="kjh ">
					<view class="left">
						<view class="top">
							{{state.numbernewdata.title}}
						</view>
						
					</view>
					<view class="right ss-flex">
						<view class="hmlist">
							<view class="item" v-for="item in state.numbernewdata.number">
								{{item}}
							</view>
							
						</view>
						<view class="bot" @tap="LC.$router.go('/pages/index/cplist')">
							查看更多》
						</view>
					</view>
				</view>
				<view class="tablist ss-flex ">
					<view class="tab " v-for="(item,i) in list3" :class="{active:i===state.tabindex1}" @tap="changetab1(i)">
						<image :src="item.image" mode=""></image>
					<view class="">
						{{item.name}}
					</view>	
					</view>

				</view>
				<view class="wzlist">
					<u-empty
					v-if="state.datalist.length<1"
					        
					       
					>
					</u-empty>
					<view class="wzitem" v-for="item in state.datalist" @tap="LC.$router.go('/pages/index/pageDetail?id='+item.id)">
						<image :src="list3[state.tabindex1].image" class="image" mode=""></image>
						<view class="right">
							<view class="title u-line-1" style="width: 430rpx;">
								{{item.title}}
							</view>
							<view class="subtitle u-line-1" style="width: 430rpx;">
								{{item.brief}}
							</view>
							<view class="botq">
								<view class="ll">
									浏览:{{item.pv}}人
								</view>
								<view class="price">
									<span>{{item.price}}</span>金币
								</view>
							</view>
						</view>
						
					</view>
				</view>

	<u-loadmore :status="state.pageData.status" font-size="26rpx" icon-size="36rpx" margin-top="30rpx" />
			</view>
		</view>
	</view>
</template>

<script setup>
	
	import {
		openkf
	} from '../../utils/kf';

	import {
		computed,
		reactive
	} from 'vue';
	import LC from '../../LC';
	import {
		onLoad,
		onReady,
		onShow,
		onReachBottom
	} from '@dcloudio/uni-app'

	let state = reactive({
		data: {
			category:[],
			notice:''
		},
		pageData:{
			page: 1,
			limit:15,
			status: 'loading'
		},
		tabindex:0,
		tabindex1:0,
		numbernewdata:{},
		data1: [],
		datalist:[]
	})
	let list3=computed(()=>{
		if(state.data.category.length){
			return LC.$store('app').cpcategorylist[state.data.category[state.tabindex].id]
		}
		return []
		
	})
	function todown(){
		// #ifdef APP
		plus.runtime.openWeb('https://xzgl.lizhijun.net/xzgl.apk')
		// #endif
		// #ifdef H5
		location.href='https://xzgl.lizhijun.net/xzgl.apk'
		// #endif
		
	}
	onShow(()=>{
		changetab({index:state.tabindex})
	})

	onLoad(() => {


		if (!LC.$store('user').isLogin) {
			uni.reLaunch({
				url: '/pages/auth/login'
			})
		}

		getmsg()
	})


	function openLInk(href) {
		// #ifdef APP-PLUS
		plus.runtime.openURL(href)
		// #endif
		// #ifdef H5
		LC.$router.go('/pages/index/webview', {

			url: encodeURI(href)

		})
		// #endif
		// #ifdef MP
		uni.setClipboardData({
			data: href,
			success: () => {
				uni.hideToast();
				this.$nextTick(() => {
					uni.$u.toast(this.mpTips);
				})
			}
		});
		// #endif

	}
	function numbernew(){
		if(!state.data.category.length){
			return 
		}
	
		LC.$api.home.numbernew({type:state.data.category[state.tabindex].id})
			.then(({
				res,
				data
			}) => {
		
		
				state.numbernewdata = data
				
			})
		
	}
	function changetab({index}){
		state.tabindex=index
		state.tabindex1=0
	
		state.pageData = {
			page: 1,
			limit:15,
			status: 'loading'
		}
		state.datalist = []
			
			
		getlist()
		numbernew()
	}
	function changetab1(index){
		state.tabindex1=index
		
	
		state.pageData = {
			page: 1,
			limit:15,
			status: 'loading'
		}
		state.datalist = []
			
			
		getlist()
		
	}

	function getmsg() {


		LC.$api.home.index()
			.then(({
				res,
				data
			}) => {

				
				state.data = data
				LC.$store('app').cpcategory=state.data.category
				numbernew()
				getlist()
			})

	}
	
	
	
	onReachBottom(() => {
		onbottom()
	})
	
	
	
	function onbottom() {
	
		let {
			status,
			load,
			limit,
			page
		} = state.pageData
	
		if (status != 'nomore' && !load) {
	
			getlist()
	
	
		}
	}
	

	
	function getlist() {
		console.log(list3.value,state.tabindex1)
	if(!list3.value.length){
		return 
	}
		LC.$api.home.articlelist({
				...state.pageData,
				type: list3.value[state.tabindex1].id
			})
			.then(({
				res,
				data
			}) => {
	
	
				state.datalist = [...state.datalist, ...data.data]
				
				if (data.data.length < state.pageData.limit) {
					state.pageData.status = 'nomore'
					return
				}
	
	
				state.pageData.status = 'loadmore'
				state.pageData.page += 1
	
			})
	
	}
</script>

<style lang="scss">
	.wapper {
		padding: 0 30rpx;
	}
	.download{
		width: 166rpx;
		margin-left: auto;
		height: 60rpx;
		background: linear-gradient( 90deg, #FB5351 0%, #FF7352 100%);
		border-radius: 58rpx;
		font-weight: 500;
		font-size: 26rpx;
		line-height: 60rpx;
		color: #FFFFFF;
		text-align: center;
	}

	.wzlist {
		.wzitem {
				margin-bottom: 40rpx;
	
				margin-top: 12rpx;
				min-height: 132rpx;
				background: #fff;
				
			
				display:flex;
				.image{
					width:236rpx;
					height:184rpx;
					border-radius: 15rpx;
					flex-shrink: 0;
					margin-right: 24rpx;
				}
				.right{
					flex:1;
				}
	
				.title {
					font-weight: 500;
					font-size: 32rpx;
					color: #333333;
				}
				.subtitle{
					margin-top: 8rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #707070;
				}
				.botq{
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 48rpx;
					.ll{
						    background-color: #FFF2E2;
						    border-radius:10rpx;
						    font-size: 22rpx;
						    font-weight: 400;
						    color: #FE9519;
						    height: 36rpx;
							line-height: 36rpx;
						    padding: 0 20rpx;
					}
					.price{
						
						font-size: 36rpx;
						color: #FC5652;
						line-height: 42rpx;
						       
						
					}
				}
			
	
		}
	
	}

	.tablist {
		padding: 20rpx 0;

		.tab {
			
	
			
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #1F2136;
			margin-right: 20rpx;
			text-align: center;
			line-height: 54rpx;
			
			display:flex;
			flex-direction: column;
			margin: 0 32rpx;
			align-items: center;
			image{
				width: 64rpx;
				height: 64rpx;
				background: #FFBC3A;
				
				
			}
			text{
				
			}

			&.active {
				// background: rgba(246, 139, 139, .6);
				color: red;
			}
		}

	}

	.kjh {
		padding: 30rpx;
	background: #FAFAFA;
	border-radius: 12rpx;
	margin-top:15rpx;
		

		.left {
			.top {
				font-weight: 500;
				font-size: 26rpx;
				color: #333333;
				line-height: 30rpx;
			}

			.bot {
				margin-top: 10rpx;
				font-size: 22rpx;
			}
		}

		.right {
			margin-top: 40rpx;
			.bot{
				width: 166rpx;
				margin-left: auto;
				height: 60rpx;
				background: linear-gradient( 90deg, #FB5351 0%, #FF7352 100%);
				border-radius: 58rpx;
				font-weight: 500;
				font-size: 26rpx;
				line-height: 60rpx;
				color: #FFFFFF;
				text-align: center;
				
			}

			.hmlist {
				display: flex;

				.item {
					
					margin-right: 16rpx;
					
					width: 64rpx;
					height: 64rpx;
					background: linear-gradient( 90deg, #FB5351 0%, #FF7352 100%);
					box-shadow: 0px 8rpx 8rpx 0px rgba(254,101,82,0.45);
					border-radius: 50%;
					font-size: 40rpx;
					color: #FFFFFF;
					line-height: 47rpx;
					text-align: center;
					line-height: 64rpx;
				}
			}

		}

	}

	.top-icon {
		.icon{
			width:52rpx;
			height:52rpx;
		}
		.logo {
			width: 264rpx;
			height: 64rpx;
		}
		padding-bottom: 30rpx;

		
	}
</style>